<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-25 11:50:24
 * @LastEditTime: 2023-11-06 14:11:15
 * @LastEditors: huangshuai 
-->
<template>
  <div class="home" v-loading="loading">
    <div class="num">
      <div style="width: 100%; text-align: center">
        <el-statistic :value="+numWeek">
          <template #title>
            <div
              style="display: inline-flex; align-items: center; font-size: 20px"
            >
              过去一周里所有用户访问系统次数
              <el-tooltip
                effect="dark"
                content="过去一周里所有用户访问系统次数"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="16">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
            <div style="width: 100%; height: 20px"></div>
          </template>
        </el-statistic>
      </div>
      <div style="width: 100%; text-align: center">
        <el-statistic :value="+numMonth">
          <template #title>
            <div
              style="display: inline-flex; align-items: center; font-size: 20px"
            >
              当月内所有用户访问系统次数
              <el-tooltip
                effect="dark"
                content="当月内所有用户访问系统次数"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="16">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
            <div style="width: 100%; height: 20px"></div>
          </template>
        </el-statistic>
      </div>
    </div>

    <div id="main" style="width: 40%; height: 350px"></div>
  </div>

  <div class="yili">
    <el-card style="width: 90%"> <el-calendar v-model="date" /></el-card>
  </div>
  <div style="width: 100%; height: 20px"></div>
  <Map />
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useTabsStore } from "@/stores/tabs";
import { getUserLoginRecordNum } from "@/api/user";

import Map from "./map.vue";
import * as echarts from "echarts";
const loading = ref<boolean>(false);
var myChart: any;
const getCharts = () => {
  myChart = echarts.init(document.getElementById("main"), "purple-passion");
  myChart.setOption({
    xAxis: {
      type: "category",
      data: ["1天前", "2天前", "3天前", "4天前", "5天前", "6天前", "7天前"],
    },
    yAxis: {
      type: "value",
      splitNumber: 4,
    },
    tooltip: {
      show: true,
      formatter: (params: any) => {
        // var num = 7 - params.dataIndex;
        return (
          params.dataIndex +
          1 +
          "天前用户访问系统的次数：&nbsp;&nbsp;" +
          params.value
        );
      },
    },
    series: [
      {
        data: numDay.value,
        type: "line",
      },
    ],
  });
};

const tabsStore = useTabsStore();
const numDay = ref<any>();
const numWeek = ref<any>();
const numMonth = ref<any>();
onMounted(async () => {
  loading.value = true;
  await getUserLoginRecordNum().then((res: any) => {
    numWeek.value = 0;
    res.data.viewNumOneDay.forEach((item: string) => {
      numWeek.value += +item;
    });

    numDay.value = res.data.viewNumOneDay;

    numMonth.value = res.data.viewNumOneMonth;
  });
  getCharts();
  tabsStore.activeKey = "/home";
  tabsStore.addTab(tabsStore.tabsList, { path: "/home", title: "首页" });
  loading.value = false;
});
const date = ref(new Date());
</script>

<style lang="less" scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
.yili {
  width: 100%;
  // height: 670px;
  display: flex;
  // align-items: center;
  justify-content: center;
}
.num {
  width: 50%;
  height: 250px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.home {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  height: 350px;
}
</style>
